<style lang='scss' scoped>
  .regist{
    position: relative;
    margin: 58px auto 102px auto;
    width:500px;
    height:70px;
    font-size:50px;
    color:rgba(0,0,0,0.87);
    line-height:70px;
    text-align: center;
  }

  .regist-input-item{
    margin: 0 auto;
    margin-bottom: 19px;
  }

  .regist-qrcode{
    clear: both;
    position: relative;
    /*width: 200px; height: 200px;*/
    margin: 12px auto 0 auto;
    /*background: #ccc;*/
  }

  .qrcode-text{
    color:rgba(48,54,65,1);
    line-height:21px;
    font-size: 15px;
    margin: 41px auto 11px auto;
  }

  .qrcode-tip{
    color:#9B9B9B;
    line-height:12px;
    font-size: 12px;
    margin: 0 auto 30px auto;
  }

  .regist-btn{
    width:300px;
    height:50px;
    background:rgba(48,54,65,1);
    border-radius:3px;
    margin: 0 auto;
    margin-bottom: 150px;
    font-size:15px;
  }

  .text{
    width:100%;
    height:17px;
    text-align: center;
    font-size:12px;
    font-family:PingFangSC-Light;
    color:rgba(155,155,155,1);
    line-height:17px;
    margin-bottom: 30px;
  }

  .regist-name{
    margin: 30px auto 80px auto;
    height:28px;
    font-size:20px;
    color:rgba(155,155,155,1);
    line-height:28px;
  }

  .regist-wait-box{
    width: 186px; height: 186px;
    margin: 0 auto;
    border: 1px solid #ccc;
  }

  .registBtn{
    width:200px;
    height:45px;
    background:rgba(255,255,255,1);
    border-radius:5px;
    border:1px solid rgba(57,184,102,1);
    line-height: 45px;
    text-align: center;
    font-size: 15px;
    color: #39B866;
    margin-top: 57px;
    margin-bottom: 126px;
  }

  $h:45px;
  .code-wrap{
    position: relative;
    width: 300px; height: $h;
    overflow: hidden;
    display: flex;
    border:1px solid rgba(150,150,150,1);
    &>input{
      padding-left: 18px;
      box-sizing: border-box;
      display: block;
      width: 200px;
      outline: none;
      border: none;
      font-size: 16px;
    }
    &>.x-send-btn{
      flex: 1;
      display: block;
      width: 100px; height: 100%;
      background:rgba(242,242,242,1);
      border:1px solid #9B9B9B;
      border: none;
      outline: none;
      font-size:12px;
      color:rgba(48,54,65,1);
      line-height:45px;
    }
  }
</style>
<template>
  <section class='m-page'>
    <x-head login />

    <!-- 注册提交前 -->
    <template v-if="1">
      <div class="regist">商户注册</div>

      <div class="regist-qrcode" id="wxDom"></div>
      <template v-if="1">
        <div class="qrcode-text">请先微信扫码再填写信息</div>
        <div class="qrcode-tip">动态二维码，10分钟内有效</div>
      </template>

      <template v-else>
        <div class="qrcode-text green">扫码成功</div>
        <div class="qrcode-tip">{{username}}</div>
      </template>

      <x-input class="regist-input-item" placeholder="商户名称" v-model="name"/>
      <x-input-select class="regist-input-item" placeholder="商户类型" :options="optionsRegister" v-model="type"/>
      <x-input class="regist-input-item" placeholder="所在城市" v-model="city"/>
      <x-input class="regist-input-item" placeholder="手机号" v-model="tel"/>

      <div class="code-wrap regist-input-item">
          <input type="text" placeholder="验证码" v-model="code">
          <yd-sendcode
            class="x-send-btn"
            v-model="start"
            @click.native="sendCode"
            second="60"
            init-str="获取验证码"
            run-str="{%s}秒后重发"
            reset-str="重新获取"
            type="primary">
          </yd-sendcode>
      </div>


      <yd-button size="large" bgcolor="#303641" color="#FFF" class="regist-btn" @click.native="regist">注册</yd-button>
    </template>

    <!-- 注册提交等待 -->
    <template v-else-if="0">
      <div class="regist">商户注册已提交</div>
      <div class="regist-name">{{name}}</div>
      <div class="regist-wait-box"></div>
      <div class="qrcode-text green">审核中…</div>
      <div class="qrcode-tip" style="margin-bottom: 131px;">通过微信或短信通知审核结果，请耐心等待</div>
    </template>

    <!-- 注册成功去登陆 -->
    <template v-else-if="0">
      <div class="regist">商户注册已提交</div>
      <div class="regist-name">{{name}}</div>
      <div class="regist-wait-box"></div>
      <button class="registBtn">已通过审核，去登录</button>
    </template>


    <div class="text">联系我们：微信或电话 15325719985</div>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        tel: '', // 暂时没字段
        username: '杭州xxx画廊',
        name: '', // 暂时没字段
        shopType: '', // 暂时没字段
        code: '',
        openid: '',
        deviceid: 'WEB_TEST_123456',
        usericon: '',
        type: {

        },
        optionsRegister:[{label: '画廊', value: 1},{label: '画家', value: 2}],
        city: '',
        start: false
      }
    },

    components: {},

    computed: {
      ...mapState({
        wxInfo: state => state.login.wxInfo,
        getCodeResult: state => state.login.getCodeResult
      })
    },

    mounted () {
      if (this.getUrlParam()['code'] && localStorage.getItem('codepath') == '/regist') {
        this.confirmWxInfo(this.getUrlParam()['code'])
      } else {
        this.wxLogin()
      }
    },

    methods: {
      ...mapActions([
        'getWxInfo',
        'getLoginList',
        'getMobileCode',
        'registe'
      ]),
      getUrlParam: function () {
        var params = {};
        var str = location.href; //取得整个地址栏
        var num = str.indexOf("?");
        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

        var arr = str.split("&"); //各个参数放到数组里
        for (var i = 0; i < arr.length; i++) {
          num = arr[i].indexOf("=");
          if (num > 0) {
            var name = arr[i].substring(0, num);
            var value = arr[i].substr(num + 1);
            params[name] = value
          }
        }
        return params
      },
      wxLogin (){
        localStorage.setItem('codepath','/regist')
        var obj = new WxLogin({
          id: "wxDom",
          appid: "wxe2ff3ac2028a6376",
          scope: 'snsapi_login',
          redirect_uri: window.encodeURI('http://test.shop.51artx.com/artx/shop/dist/#/')
        })
      },
      confirmWxInfo(code){
        localStorage.setItem('codepath','');
          this.getWxInfo({code: code})
            .then(data => {
                this.city = data.result.city
                this.name = data.result.nickname
            })
      },

      sendCode () {
          var params = {
              type: 0,
              nationcode: '86',
              userphone: this.tel
          }
          this.getMobileCode(params)
            .then(data => {
              this.start = true
            })
      },
      regist () {
//        outframe: '外框',
//          infram: '内框',
//          outmatcard: '外衬卡纸',
//          middlematcard: '中衬卡纸',
//          inmatcard: '内衬卡纸',
//          agent: '微代理',
//          paint: '画芯',
//          order: '订单'
        let params = {
          action: 'addShopOwner',
          location: this.city,
          username: this.name,
          userphone: this.tel,
          name: this.wxInfo.nickname,
          duty: '超管',
          auth:'outframe,infram,outmatcard,middlematcard,inmatcard,submanager,agent,paint,order',
          shoptype: this.type,
          code: this.code,
          codeid:this.getCodeResult.codeid,
          city: this.city,
          openid: this.wxInfo.openid,
          deviceid: this.deviceid,
          usericon: this.wxInfo.headimgurl
        }
        this.registe(params)
          .then(data => {
              let params = {
                action: 'getloginlist',
                openid:data.result.openid
              }
              this.getLoginList(params)
                .then(listData => {
                  this.$router.push('/login/shopAdmin')
                })
          })
      }
    }
  }

</script>

